<template>
  <div class="box">
    <div class="fen">
      <span class="xian">|</span>
      <el-select
        clearable
        v-model="value"
        class="m-2"
        placeholder="Select"
        size="large"
      >
        <el-option
          v-for="item in option"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>

    <div class="pic">
      <div class="pic1">
        <input type="checkbox" />
        <div class="pic2">
          <p>考勤日期</p>
          <span>2020-02-01至2020-02-17</span>
        </div>
      </div>
      <div class="pic1a">
        <input type="checkbox" />
        <div class="pic2">
          <p>出勤总人数</p>
          <span>139</span>
        </div>
      </div>
      <div class="pic1b">
        <input type="checkbox" />
        <div class="pic2">
          <p>出勤正常人数</p>
          <span>139</span>
        </div>
      </div>
      <div class="pic1c">
        <input type="checkbox" />
        <div class="pic2">
          <p>出勤异常人数</p>
          <span>14</span>
        </div>
      </div>
    </div>
    <div class="nian">
      <p>|</p>
      <span>2020-02出勤情况趋势图</span>
    </div>
    <div class="fens">
      <div class="fen">
        <span>所在承建商</span>
        <el-select
          clearable
          v-model="value1"
          class="m-2"
          placeholder="Select"
          size="large"
        >
          <el-option
            v-for="item in option2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="fen">
        <span>所在班组</span>
        <el-select
          clearable
          v-model="value2"
          class="m-2"
          placeholder="Select"
          size="large"
        >
          <el-option
            v-for="item in option3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
   <div id="box"  style="width: 800px; height: 250px"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import * as echarts from 'echarts';


onMounted(()=>{
  type EChartsOption = echarts.EChartsOption;
  var chartDom = document.getElementById('box')!;
var myChart = echarts.init(chartDom);
var options: EChartsOption;
options = {
  
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['0','1','2','3','4','5,','6','7','8','9','10','11','12']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [7,8,8,9,8,9,9,9,6,7,9,9,9]
    },
   
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [2,1,1,0,1,0,0,0,4,2,0,0,0,]
    }
    
  ]
};

options && myChart.setOption(options);


})


const value = ref("");
const value1=ref("")
const value2=ref("")
const option = [
  {
    label: "xxxxxxx项目1",
    value: "xxxxxxx项目1",
  },
  {
    label: "xxxxxxx项目2",
    value: "xxxxxxx项目2",
  },
];
const option2 = [
  {
    label: "---请选择---",
    value: "---请选择---",
  },
  {
    label: "xxxxxx建筑公司1",
    value: "xxxxxx建筑公司1",
  },
  {
    label: "xxxxxx建筑公司2",
    value: "xxxxxx建筑公司2",
  },
  {
    label: "xxxxxx建筑公司3",
    value: "xxxxxx建筑公司3",
  },
];
const option3 = [
  {
    label: "---请选择---",
    value: "---请选择---",
  },
  {
    label: "xxxxx班组1",
    value: "xxxxx班组1",
  },
  {
    label: "xxxxx班组2",
    value: "xxxxx班组2",
  },
  {
    label: "xxxxx班组3",
    value: "xxxxx班组3",
  },
];
</script>

<style scoped>
.fen {
  margin-left: 20px;
}
.fen .xian {
  font-size: 20px;
  color:#1abc9c;
}
.el-select {
  margin-left: 10px;
}
.pic {
  display: flex;
  margin: 10px;
  justify-content: space-between;
  color: white;
}
.pic1 {
  width: 24%;
  display: flex;
  height: 100px;
  background-color: #f2caac;
 
}
.pic1a{
  background-color: #95c8ff;
  display: flex;
  height: 100px;
}
.pic1b{
  background-color: #76d7c4;
  display: flex;
  height: 100px;
}
.pic1c{
  background-color: #acc5f2;
  display: flex;
  height: 100px;
}
 input {
  width: 21px;
  margin-left: 10px;
}
 p {
  margin-left: 110px;
  margin-top: 20px;
}
 
.pic1 span {
  margin-left: 10px;
  font-size: 18px;
}
.pic1a span {
  margin-left: 164px;
  font-size: 18px;
}
.pic1b span {
  margin-left: 164px;
  font-size: 18px;
}
.pic1c span {
  margin-left: 164px;
  font-size: 18px;
}
.fens {
  display: flex;
  margin-top: 10px;
}
.nian {
  display: flex;
  height: 40px;
  margin-left: 20px;
}
.nian p{
  margin-left: 0;
  margin-top: 5px;
  color:#1abc9c;
 
}
.nian span {
  margin-left: 10px;
  font-weight: 700;
  font-size: 17px;
  line-height: 40px;
}
</style>